<script setup>
import {ref,reactive} from 'vue'
import {ueserlogin} from '@/api/user.js'
import {setToken} from '@/stores/token.js'
import router from '@/router/index.js'

 const formData = ref({
   username:'',
   userpassword:'',
   code:'',

 })
 const loginForm = ref(null)
 const formRules = reactive({
     username:[{required:true,message:'请输入账号',trigger:'blur'},
     {max:11,message:'最多11位',trigger:'blur'}],
   userpassword:[{required:true,message:'请输入密码',trigger:'blur'},
   {min:6,max:12,message:'密码6-12位',trigger:"blur"}],
   code:[{required:true,message:'请输入验证码',trigger:'blur'}],
 })
 const login = async () =>{
  const res =  await ueserlogin(formData.value)
  console.log(res)
   if(res.data.token){
       setToken(res.data.token)
       router.push('/')

   }
 
    
 }


</script>

<template>
   <div class="login-page">
      <div class="login-img">
         <img class="bgc" src="../../../src/assets/common/images/login-l.png" alt="">
   <el-card class="login-card">
      <div class="header">
          <div class="logo"><img src="../../assets/common/images/login-logo.png" alt=""></div>
          <h2>汇客CRM系统</h2>
      </div>
      <el-form  ref="loginForm" class="login-form" :model="formData" :rules="formRules">
        <el-form-item  class="login-input" prop="username">
          <el-input class="inpt"  v-model="formData.username" style="width:214px;height:31px" placeholder="请输入账号">
            <template  #prefix>
               <svg-icon iconName="user" class="iconClass"></svg-icon>
            </template>
           
          </el-input>
        </el-form-item >
         <el-form-item  class="login-input" prop="userpassword">
          <el-input class="inpt" v-model="formData.userpassword" style="width:214px;height:34px"  type="password" placeholder="请输入密码">
             <template  #prefix>
               <svg-icon iconName="password" class="iconClass"></svg-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item  class="login-input" prop="code">
          <el-input class="inpt" v-model="formData.code" style="width:214px;height:34px" placeholder="请输入验证码">
             <template  #prefix>
               <svg-icon iconName="safe" class="iconClass"></svg-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item  class="login-input">
         <el-button class="loginbtn" style="width:214px;height:34px"  @click="login" >登录</el-button>
        </el-form-item>
      </el-form>

   </el-card>
   </div>
   </div>
</template>
<style scoped lang='scss'>
 *{
                                           
   padding: 0;
   margin: 0;
}
.login-img{

   position: relative;
   width: 886px;
   height: 446px;
   .bgc{
      width: 533px;
      height: 100%;
   }
}

.login-page{
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
    background-color: rgb(43, 48, 59)
  
   
}
.login-card{
   position: absolute;
   top: 0;
   right: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 353px;
   height: 446px;
 
}
.header{
   display: flex;
   justify-content: center;
   .logo{
      width: 32px;
      height: 32px;
      img{
         width: 100%;
         height: 100%;
      }
   }
}
.login-form{
   margin-top: 35px;
   .login-input{
      margin-bottom: 24px;
   }

}
.iconClass {
   width: 16px;
   height: 16px;

}
.loginbtn{
   border-radius: 20px;
   background-color: rgb(5, 204, 149);
   color: #fff;
}
.login-input{
   border: 0;
}
.inpt{
  border: none;
   outline: none;
}
    



</style>